<template>
    <div class="talent_container">
        <div class="item" v-for="(item, index) in teamInfo[survivorTeamKey]?.survivor" :key="index">
            <div class="characater global-flex-center">{{ bpAll[`pickSur${index + 1}` as keyof typeof bpAll] }}</div>
            <div class="name_space global-flex-center">{{ item }}</div>
            <div class="talent">
                <div class="talent_item global-flex-center" :class="talentReactive[index].hgfz ? 'active' : ''"
                    @click="toggleTalent(index, 'hgfz')">
                    <img src="../../assets/images/talent/回光返照.png">
                </div>
                <div class="talent_item global-flex-center" :class="talentReactive[index].xtfs ? 'active' : ''"
                    @click="toggleTalent(index, 'xtfs')">
                    <img src="../../assets/images/talent/膝跳反射.png">
                </div>
                <div class="talent_item global-flex-center" :class="talentReactive[index].hxwy ? 'active' : ''"
                    @click="toggleTalent(index, 'hxwy')">
                    <img src="../../assets/images/talent/化险为夷.png">
                </div>
                <div class="talent_item global-flex-center" :class="talentReactive[index].flxy ? 'active' : ''"
                    @click="toggleTalent(index, 'flxy')">
                    <img src="../../assets/images/talent/飞轮效应.png">
                </div>
            </div>
            <div class="change_icon">
                <div class="global-flex-center" v-if="index !== 0" @click="toggleChar(index, 1)">1</div>
                <div class="global-flex-center" v-if="index !== 1" @click="toggleChar(index, 2)">2</div>
                <div class="global-flex-center" v-if="index !== 2" @click="toggleChar(index, 3)">3</div>
                <div class="global-flex-center" v-if="index !== 3" @click="toggleChar(index, 4)">4</div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts' name="TalentChoose">
import storeHelper from '@/utils/TauriStore';
import { deepClone } from '@/utils';
interface TalentItem {
    hgfz: boolean;
    xtfs: boolean;
    hxwy: boolean;
    flxy: boolean;
}
const props = defineProps<{
    teamInfo: Partial<TeamInfo>;
    survivorTeamKey: 'team1' | 'team2'
    bpAll: Record<string, string | null>;
    canOperation: boolean
}>();
const emits = defineEmits<{
    (event: 'changeSide', nowIndex: number, toggleIndex: number): void;
}>();

const talentReactive = reactive<TalentItem[]>([
    {
        hgfz: false,
        xtfs: false,
        hxwy: false,
        flxy: false
    },
    {
        hgfz: false,
        xtfs: false,
        hxwy: false,
        flxy: false
    },
    {
        hgfz: false,
        xtfs: false,
        hxwy: false,
        flxy: false
    },
    {
        hgfz: false,
        xtfs: false,
        hxwy: false,
        flxy: false
    }
]);
const toggleTalent = (_index: number, key: keyof TalentItem) => {
    if (!props.canOperation) return;
    talentReactive[_index][key] = !talentReactive[_index][key];
};
const toggleChar = (_nowIndex: number, _changeIndex: number) => {
    if (!props.canOperation) return;
    emits('changeSide', _nowIndex, _changeIndex);
}
// 给父组件调用
const postSurTalentMessage = () => {
    return new Promise(async (resolve) => {
        const characterArr = [];
        characterArr.push(props.bpAll.pickSur1);
        characterArr.push(props.bpAll.pickSur2);
        characterArr.push(props.bpAll.pickSur3);
        characterArr.push(props.bpAll.pickSur4);
        const constructorMap = {
            surTalent: deepClone(talentReactive), //天赋0-3 
            surPlayerNames: deepClone(props.teamInfo[props.survivorTeamKey]?.survivor ?? []), //求生者名称0-3
            surChars: characterArr, //选的角色0-3
        };
        await storeHelper.set('hasTalentSur', constructorMap);
        resolve('ok');
    })

}
defineExpose({
    postSurTalentMessage
})
</script>
<style scoped lang='scss'>
.talent_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    margin: 1em 0;

    .item {
        width: 140px;
        display: grid;
        grid-template-rows: 60px 20px 35px 30px;
        border: 1px solid #e7e7e7;

        .characater {
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .name_space {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 0.8em;
            background: #000;
            color: #fff;
        }

        .talent {
            display: grid;
            grid-template-columns: repeat(4, 1fr);

            .talent_item {
                width: 35px;
                height: 35px;
                background: #999;
                cursor: pointer;
                transition: 0.57s all;

                &.active {
                    background: #4090EF;
                }

                img {
                    width: 30px;
                    height: 30px;
                }
            }

        }

        .change_icon {
            width: 100%;
            height: 30px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            cursor: pointer;

            div:first-child {
                border-right: 1px solid #e7e7e7;
            }

            div:nth-child(2) {
                border-right: 1px solid #e7e7e7;
            }

            div:hover {
                background: #c3dbf4;
            }
        }
    }
}
</style>